<template>
	<!--  作品列表  -->
	<mu-flex> 
	</mu-popover>
		<mu-grid-list class="gridlist-demo">
			<mu-sub-header>作品图片</mu-sub-header>
			<mu-grid-tile v-for="tile,index in list1" 
			:key="'tile' + index" title-position="top" action-position="left" :rows="targetRows"
			 :cols="targetCol">
				<img :src="tile.image" style="width: 100%;" />
				<span slot="title">{{tile.title}}</span>
				<span slot="subTitle">by <b>{{tile.author}}</b></span>
				<mu-button slot="action" icon>
					<mu-icon value="star_border"></mu-icon>
				</mu-button>
			</mu-grid-tile>
		</mu-grid-list>
	</mu-flex>

</template>

<script>
	const imgCamera = 'https://muse-ui.org/img/breakfast.f1098290.jpg';
	const imgFlower = 'https://muse-ui.org/img/vegetables.30f55d57.jpg';
	export default {
		data() {
			return {
				targetRows:1,
				targetCol:2,
				list1: [{
					image: imgCamera,
					title: '芳香午后',
					author: 'Ms.石',
					featured: true
				}, {
					image: imgFlower,
					title: '丰收时节',
					author: 'Ms.石',
					featured: false
				}, {
					image: imgCamera,
					title: '芳香午后',
					author: 'Ms.石',
					featured: false
				}, {
					image: imgFlower,
					title: '丰收时节',
					author: 'Ms.石',
					featured: false
				}, {
					image: imgCamera,
					title: '芳香午后',
					author: 'Ms.石',
					featured: false
				}, {
					image: imgFlower,
					title: '丰收时节',
					author: 'Ms.石',
					featured: true
				}]
			}
		},
		methods: {
			//向父组件发送消息，比如 通知本页面生成了
			sendMessageForParent() {
				this.$emit("listenToEvent", "1");
			},
		},
		mounted() {
			//向父组件传递消息
			this.sendMessageForParent();
		},
	}
</script>

<style>
	.gridlist-demo {
	    width: 360px;
	    height: 101%;
	    overflow-y: auto;
	}
</style>
